<template>
    <div class="video-com">
        <div id="carousels">
      <div
        class="carousel"
        ref="carousel"
        v-bind:style="{ height: height + 'px' }"
      >
        <transition-group tag="ul" class="slide clearfix" :name="transitionName">
          <li
            v-for="(item, index) in slideData"
            :key="index"
            v-show="index == beginValue"
            v-bind:style="{ height: height + 'px' }"
            style="display: flex"
          >
            <!-- 播放视频 -->
            <div v-for="(v, e) in item.videos" :key="e" class="videos">
              <video
                ref="videoPlay"
                muted=""
                :src="v.video"
                controls="controls"
                :autoplay="autoPlay"
                loop="loop"
                style="width: 100%; height: 100%"
                @timeupdate="timeupdate"
              ></video>
            </div>
            <div class="up" @click="up"> @ </div>
            <div class="next" @click="next"> ></div>
          </li>
        </transition-group>
      </div>

     </div>
 </div>
</template>




<script>
import "videojs-contrib-hls"

export default {
     props: {
        height: {
        type: Number,
        default: 600,
       },
         dot: {
          type: Boolean,
          default: true,
       },
        arrow: {
        type: Boolean,
        default: true,
      },
        interval: {
        type: Number,
         default: 5000,
      },
      begin: {
         type: Number,
         default: 0,
      },
      slideData: {
        type: Array,
        default: function () {
          return [];
        },
      },
    },

     data() {
         return {
           setInterval: "",
           beginValue: 0,
           transitionName: "slide",
           mytime_02: true,
         }
     },
     mounted() {
      // var box = this.$refs.carousel; //监听对象
      // box.addEventListener("mouseover", () => {
      //   this.mouseOver();
      // });
      // box.addEventListener("mouseout", () => {
      //   this.mouseOut();
      // });
      this.beginValue = this.begin;
      this.play();
    },
    methods: {
      timeupdate(e) {
        if (!this.mytime_02) {
          return;
        } //首次进入能执行
        this.mytime_02 = false;
        setTimeout(() => {
          if(parseInt(e.target.currentTime)== Math.floor(e.target.duration)){
              this.next()
          }
          this.mytime_02 = true; //上次执行成功，下一次才可执行。
        }, 1000);
      },
      //改变前后
      change(key) {
        if (key > this.slideData.length - 1) {
          key = 0;
        }
        if (key < 0) {
          key = this.slideData.length - 1;
        }
        this.beginValue = key;
      },
      autoPlay() {
        this.transitionName = "slide";
        this.beginValue++;
        if (this.beginValue >= this.slideData.length) {
          this.beginValue = 0;
          return;
        }
      },
      play() {
        //   this.setInterval = setInterval(this.autoPlay, this.interval);
        this.autoPlay;
      },
      mouseOver() {
        //鼠标进入
        //console.log('over')
      //   clearInterval(this.setInterval);
      },
      mouseOut() {
        //鼠标离开
        //console.log('out')
      //   this.play();
      },
      up() {
        //上一页
        --this.beginValue;
        this.transitionName = "slideBack";
        this.change(this.beginValue);
      },
      next() {
        //下一页
        ++this.beginValue;
        this.transitionName = "slide";
        this.change(this.beginValue);
      },
    },
    beforeDestroy() {
      // 组件销毁前,清除监听器
      clearInterval(this.setInterval);
    },

 }

</script>


<style lang="scss" scoped>
    //  .video-com {

    //  }
     .slide {
    position: relative;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100vw;
    /* height: 1.4rem; */
    background: rgb(17, 18, 18);
    height: 500px;
  }
  .slide li {
    list-style: none;
    position: absolute;
    width: 100%;
    height: 500px;
    /* height: 1.4rem; */
  }
  .slide li img {
    /* width: 100%; */
    /* height: 1.4rem; */
    height: 500px;
    cursor: pointer;
  }
  .slide li .title {
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 10px 20px;
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: larger;
    text-align: center;
  }
  .videos {
    width: 100%;
    height: 100%;
    /* margin-top: 0.2rem; */
  }
  .videos:nth-child(1) {
    margin-right: 0.2rem;
  }
  
  .slideDot {
    position: absolute;
    z-index: 999;
    bottom: 0.2rem;
    right: 1.85rem;
  }
  .slideDot span {
    display: inline-block;
    width: 0.07rem;
    height: 0.07rem;
    background: rgba(255, 255, 255, 0.65);
    margin-left: 0.05rem;
  }
  .slideDot span.active {
    background: rgba(255, 255, 255, 1);
  }
  .up,
  .next {
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: 0;
    cursor: pointer;
    font-size: 50px;
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
  .up {
    left: 0.25rem;
  }
  .next {
    left: auto;
    right: 0.25rem;
  }
  /* .up:hover {
    background-color: rgba(0, 0, 0, 0.3);
  } */
  /* .next:hover {
    background-color: rgba(0, 0, 0, 0.3);
  } */
  
  /*进入过渡生效时的状态*/
  .slide-enter-active {
    transform: translateY(0);
    transition: all 1s ease;
  }
  
  /*进入开始状态*/
  .slide-enter {
    transform: translateY(100%);
  }
  
  /*离开过渡生效时的状态*/
  .slide-leave-active {
    transform: translateY(-100%);
    transition: all 1s ease;
  }
  
  /*离开过渡的开始状态*/
  .slide-leave {
    transform: translateY(0);
  }
  
  /*进入过渡生效时的状态*/
  .slideBack-enter-active {
    transform: translateY(0);
    transition: all 1s ease;
  }
  
  /*进入开始状态*/
  .slideBack-enter {
    transform: translateY(-100%);
  }
  
  /*离开过渡生效时的状态*/
  .slideBack-leave-active {
    transform: translateY(100%);
    transition: all 1s ease;
  }
  
  /*离开过渡的开始状态*/
  .slideBack-leave {
    transform: translateY(0);
  }

</style>

